<template>
  <div class="main">
    <div class="h-24 s-box">
      <div>
        <img :src="smoke" alt="" class="deviceImg" />
      </div>
      <div>
        <div class="title">{{ cardTitle }}</div>
        <div class="value"
          >最新值：<span class="count">{{ count }}</span> {{ cardUnits }}</div
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
  import smoke from '/@/assets/images/smoke.png';
  const props = defineProps({
    widgetData: {
      type: Object,
    },
    isResize: {
      type: Boolean,
    },
    dashboard: {
      type: Boolean,
    },
  });

  const cardTitle = ref('当前设备功率');
  const cardUnits = ref<string>('kw');
  const count = ref<any>(41);
  const interval = ref<any>(null);
  watch(
    () => props.widgetData,
    (nVal: Recordable) => {
      if (!nVal) return;
      if (Object.keys(nVal).length === 0) return;
      const { title, units } = nVal;
      cardTitle.value = title;
      cardUnits.value = units;
      nextTick(() => {
        clearInterval(interval.value);
        getCount();
      });
    },
    {
      immediate: true,
      deep: true,
    },
  );
  const getCount = () => {
    interval.value = setInterval(() => {
      count.value = (Math.random() * (60 - 40) + 40).toFixed(1);
    }, 1500);
  };
  onMounted(() => {
    getCount();
  });
  onBeforeUnmount(() => {
    clearInterval(interval.value);
  });
</script>
<style lang="less" scoped>
  .main {
    display: flex;
    justify-content: center;
    margin-top: 10%;
  }

  .s-box {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;

    .title {
      font-size: 18px;
      color: rgba(0, 0, 0, 0.85);
    }

    .value {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
    }

    .count {
      display: inline-block;
      font-size: 18px;
      color: #0bdba8;
    }
  }

  .deviceImg {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
</style>
